<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒优购</title>
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>
    <!-- 引入axios -->
    <script src="../../public/js/axios.min.js"></script>

    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./order.css">


</head>

<body>
    <div id="app">


        <header>
            <div class="center">
                <div class="left">
                    <div class="logo">
                        <img width="140px" v-lazy="logoUrl">
                    </div>
                    <div class="title">确认订单</div>
                </div>
                <div class="right">
                    <el-dropdown>
                        <div class="hd-avatar">
                            <a>{{userInfo.cusNickname}}<i class="iconfont iconjiantouxia"></i></a>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <p @click="getoCar()">购物车</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="gotoPersional()">个人中心</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="logout()">退出</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </header>

        <main class="center">
            <h1>收货地址</h1>
            <div class="addr">
                <ul>
                    <li v-for="(item,index) in addressList" @mouseenter="mouseEnterAddrIndex=index"
                        @mouseleave="mouseEnterAddrIndex=-1" @click=" selAddrId=item.addrId"
                        :class="{selectArr:selAddrId==item.addrId}">
                        <i v-show="item.type">默认</i>
                        <div>
                            <h1>{{item.name}}</h1>
                            <h2>{{item.tel.substring(0,4)+"***"+item.tel.substring(7,11)}}</h2>
                            <h3>{{item.area}}</h3>
                            <h3>{{item.areaDetail}}</h3>
                            <h3>{{item.post}}</h3>
                        </div>
                        <div class="operation" v-show="mouseEnterAddrIndex===index">
                            <span v-show="!item.type" @click="setDefault(item.addrId)">设为默认地址</span>
                            <span @click="editAddr(index)">编辑</span>
                            <span v-show="!item.type" @click="setdel(item.addrId)">删除</span>
                        </div>
                    </li>
                    <li class="add" @click="isShowAddrPanel = true">
                        <i class="iconfont iconjiajianzujianjiahao"></i>
                        <p>添加地址</p>

                    </li>
                </ul>
            </div>
            <h1>商品列表</h1>
            <ul>
                <li v-for="(items , index) in orderInfo">
                    <h2>
                        <el-avatar shape="square" :size=" 24" fit="fill" style="margin-right: 10px;">{{items.sName}}
                        </el-avatar>{{items.sName}}
                    </h2>
                    <ul>
                        <li v-for="(item ,index) in items.productList">
                            <div class="img-name">
                                <img width="30px" height="30px" :src="item.pIcon">
                                <span>{{item.pName}}</span>
                            </div>
                            <div class="n-price">{{item.pPrice+"元 x"+item.pNum}}</div>
                            <div class="o-price">{{item.pPrice+"元"}}</div>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="bottom-total">
                <div class="total">
                    <table>
                        <tr>
                            <th>商品总价:</th>
                            <td>{{countPrice+"元"}}</td>
                        </tr>
                        <tr>
                            <th>运费:</th>
                            <td>10元</td>
                        </tr>
                    </table>
                </div>
                <h5>
                    <p><span>合计:</span><i>{{countPrice+10+"元"}}</i><span>元</span></p>
                </h5>
            </div>
            <div class="bottom-btn">
                <div class="btn" @click="gotoPay()">
                    去下单
                </div>
            </div>
        </main>



        <!-- foot -->
        <footer>

            <div class="center">
                <ul>
                    <li><i class="iconfont iconpinzhibaozhang"></i><span>品质保障</span></li>
                    <li><i class="iconfont icontianmaoqitiantuihuo"></i><span>七天无理由退货</span></li>
                    <li><i class="iconfont icontesefuwu"></i><span>特色服务</span></li>
                    <li><i class="iconfont iconweibiaoti-4"></i><span>急速送达</span></li>
                </ul>

            </div>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>
            </div>
        </footer>
        <!-- 侧边栏 -->
        <el-backtop :bottom="100">
            <div class="sidebar">
                <ul>
                    <li>
                        <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
                            <i class="iconfont iconjiantoushang1"></i>
                        </el-tooltip>
                    </li>
                </ul>
            </div>
        </el-backtop>
        <el-dialog title="添加收货地址" :visible.sync="isShowAddrPanel" width="50%">
            <div class="addr-panel">
                <el-form ref="addrForm" :model="addrForm">
                    <el-form-item prop="name">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-input placeholder="姓名" v-model="addrForm.name"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input placeholder="手机号" v-model="addrForm.tel"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-cascader v-model="addrDefault" :props="optionProps" style="width: 100%;" filterable
                                    :options="cityList" placeholder="请选选择省 / 市 / 区 / 街道" @change="addrListChange">
                                </el-cascader>
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="邮政编码" v-model="addrForm.post"></el-input>
                            </el-col>

                        </el-row>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-input type="textarea" :rows="2" placeholder="详细地址" v-model="addrForm.areaDetail">
                        </el-input>
                    </el-form-item>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowAddrPanel = false">取 消</el-button>
                <el-button type="primary" @click="addAddr()">添加</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改收货地址" :visible.sync="isShowEditAddrPanel" width="50%">
            <div class="addr-panel">
                <el-form ref="editFrom" :model="editFrom">
                    <el-form-item prop="name">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-input placeholder="姓名" v-model="editFrom.name"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input placeholder="手机号" v-model="editFrom.tel"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-cascader v-model="editFrom.area" :props="optionProps" style="width: 100%;"
                                    filterable :options="cityList" placeholder="请选选择省 / 市 / 区 / 街道">
                                </el-cascader>
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="邮政编码" v-model="editFrom.post"></el-input>
                            </el-col>

                        </el-row>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-input type="textarea" :rows="2" placeholder="详细地址" v-model="editFrom.areaDetail">
                        </el-input>
                    </el-form-item>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowEditAddrPanel = false">取 消</el-button>
                <el-button type="primary" @click="editAddrSubmit()">修改</el-button>
            </span>
        </el-dialog>

    </div>
</body>
<script>
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1
    })
    const baseUrl = 'http://182.92,221.225:8888'
    var app = new Vue({
        el: '#app',
        data: {
            userInfo: {

            },
            logoUrl: 'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png',
            isLogin: false,
            orderDetails: false, //是否展示订单详细信息
            orderDetailsHeight: 0, //详细订单高度
            mouseEnterAddrIndex: -1, //鼠标经过地址项
            isShowAddrPanel: false, //是否展示 添加地址面板
            isShowEditAddrPanel: false,
            isShowEditUserInfo: false,

            cityList: null, //城市列表
            addrDefault: [], //默认地址
            editFrom: {
                addrId: '',
                name: '',
                tel: '',
                area: [],
                areaDetail: '',
                post: '',
            }, //修改地址的的表单
            addrForm: {
                name: '',
                tel: '',
                area: '',
                areaDetail: '',
                post: '',

            }, //添加地址的表单
            optionProps: {
                value: 'label',
                label: 'label',
                children: 'children'
            }, //选地址的参数配置
            addressList: [

            ],
            orderInfo: [],
            selAddrId: '',


        },
        mounted() {
            this.getCityList();
            this.checkLogin();
            this.getData();
            this.getAddressList();
        },
        updated() {

        },
        computed: {

            //计算总价
            countPrice() {
                let counts = 0
                for (let i = 0; i < this.orderInfo.length; i++) {
                    const t = this.orderInfo[i].productList;
                    let count = 0
                    for (let j = 0; j < t.length; j++) {
                        if (t[j].select) {
                            count += t[j].pPrice * t[j].pNum
                        }

                    }
                    counts += count

                }

                return counts;
            },
        },
        methods: {
            //检查登录
            checkLogin() {
                const userInfo = sessionStorage.getItem("userInfo")
                if (null === userInfo) {
                    this.isLogin = false
                } else {
                    this.isLogin = true
                    this.userInfo = JSON.parse(userInfo)
                }
            },

            async getAddressList() {
                this.addressList = await axios.get(baseUrl +
                        '/common/address/getAddress?cusId=' + this.userInfo.cusId)
                    .then(function (response) {
                        return response.data.data

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            getData() {

                const d = JSON.parse(decodeURI(atob((window.location.href).split("?")[1].split("=")[1])))

                this.orderInfo = d.payList






            },
            getorderDetailsHeight() {
                if (!this.orderDetails) {
                    this.orderDetailsHeight = this.$refs.orderDetails.offsetHeight
                    this.orderDetails = true
                } else {
                    this.orderDetails = false
                    this.orderDetailsHeight = 0
                }
            },
            //去个人页
            gotoPersional() {
                window.location.href = '../personal/personal.html';
            },
            //退出登录
            logout() {
                sessionStorage.removeItem("userInfo")
                window.location.href = '../index/index.html';
            },
            //去购物车页面
            getoCar() {
                window.open('_blank').location = '../car/car.html'
            },
            //
            gotoPay() {




                if (this.selAddrId == '') {
                    this.$message({
                        message: '请选择收货地址',
                        type: 'error'
                    });
                } else {
                    const order = {
                        cusId: this.userInfo.cusId,
                        stores: this.orderInfo,
                        addrId: this.selAddrId
                    }
                    console.log(order);



                    axios.post(baseUrl + '/shop/order/submit', {
                        cusId:order.cusId,
                        stores:order.stores,
                        addrId:order.addrId


                        })
                        .then((response) => {
                            if (response.data.code == 2000) {

                                window.location.href = '../pay/pay.html?orederId='+response.data.data;

                            } else {


                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }






            },
            //去商品详情页
            toProInfo(pid) {
                var tempwindow = window.open('_blank');
                tempwindow.location = '../product/product.html?' + encodeURI('pid=' + pid);
            },
            //获取地址信息
            async getCityList() {
                this.cityList = await axios.get(
                        'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/json/CityList.json')
                    .then(function (response) {
                        return response.data

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            //修改收货地址
            editAddr(index) {
                this.isShowEditAddrPanel = true
                const addr = this.addressList[index]

                this.editFrom.addrId = addr.addrId,
                    this.editFrom.name = addr.name,
                    this.editFrom.tel = addr.tel,
                    this.editFrom.areaDetail = addr.areaDetail,
                    this.editFrom.post = addr.post,
                    this.editFrom.area = addr.area.split("-")

            },
            //添加地址
            addAddr() {

                //   验证表单   
                if (this.addrForm.name === '') {
                    this.$message({
                        message: '收货人姓名不能为空',
                        center: true,
                        type: 'error'
                    });
                } else {
                    if (!/^1[3|4|5|7|8]\d{9}$/.test(this.addrForm.tel)) {
                        this.$message({
                            message: '请输入正确的手机号',
                            center: true,
                            type: 'error'
                        });
                    } else {
                        if (this.addrForm.area === '') {
                            this.$message({
                                message: '请选择收货地址',
                                center: true,
                                type: 'error'
                            });
                        } else {
                            if (!/[1-9]\d{5}(?!\d)/.test(this.addrForm.post)) {
                                this.$message({
                                    message: '请填写正确的邮编',
                                    center: true,
                                    type: 'error'
                                });
                            } else {
                                if (this.addrForm.areaDetail === '') {
                                    this.$message({
                                        message: '请填写详细地址',
                                        center: true,
                                        type: 'error'
                                    });
                                } else {




                                    axios.post(baseUrl + '/common/address/add', {
                                            cusId: this.userInfo.cusId,
                                            name: this.addrForm.name,
                                            tel: this.addrForm.tel,
                                            area: this.addrForm.area,
                                            areaDetail: this.addrForm.areaDetail,
                                            post: this.addrForm.post

                                        })
                                        .then((response) => {
                                            if (response.data.code == 2000) {
                                                this.$message({
                                                    message: '添加成功',
                                                    type: 'success'
                                                });
                                                this.$refs.addrForm.resetFields();
                                                this.getAddressList()
                                                this.isShowAddrPanel = false

                                            } else {
                                                this.$message({
                                                    message: '添加失败',
                                                    type: 'error'
                                                });
                                                this.isShowAddrPanel = false

                                            }
                                        })
                                        .catch(function (error) {
                                            console.log(error);
                                        });
                                }
                            }
                        }

                    }
                }



            },
            //
            //修改提交
            editAddrSubmit() {

                //   验证表单   
                if (this.editFrom.name === '') {
                    this.$message({
                        message: '收货人姓名不能为空',
                        center: true,
                        type: 'error'
                    });
                } else {
                    if (!/^1[3|4|5|7|8]\d{9}$/.test(this.editFrom.tel)) {
                        this.$message({
                            message: '请输入正确的手机号',
                            center: true,
                            type: 'error'
                        });
                    } else {
                        if (this.editFrom.area === '') {
                            this.$message({
                                message: '请选择收货地址',
                                center: true,
                                type: 'error'
                            });
                        } else {
                            if (!/[1-9]\d{5}(?!\d)/.test(this.editFrom.post)) {
                                this.$message({
                                    message: '请填写正确的邮编',
                                    center: true,
                                    type: 'error'
                                });
                            } else {
                                if (this.editFrom.areaDetail === '') {
                                    this.$message({
                                        message: '请填写详细地址',
                                        center: true,
                                        type: 'error'
                                    });
                                } else {
                                    axios.post(baseUrl + '/common/address/edit', {
                                            cusId: this.userInfo.cusId,
                                            name: this.editFrom.name,
                                            tel: this.editFrom.tel,
                                            area: this.editFrom.area[0] + "-" + this.editFrom.area[1] +
                                                "-" + this.editFrom.area[2] + "-" + this.editFrom.area[3],
                                            areaDetail: this.editFrom.areaDetail,
                                            post: this.editFrom.post,
                                            addrId: this.editFrom.addrId
                                        })
                                        .then((response) => {
                                            if (response.data.code == 2000) {
                                                this.$message({
                                                    message: '修改成功',
                                                    type: 'success'
                                                });
                                                this.$refs.editFrom.resetFields();
                                                this.getAddressList()
                                                this.isShowEditAddrPanel = false

                                            } else {
                                                this.$message({
                                                    message: '修改失败',
                                                    type: 'error'
                                                });
                                                this.isShowEditAddrPanel = false

                                            }
                                        })
                                        .catch(function (error) {
                                            console.log(error);
                                        });
                                }
                            }
                        }

                    }
                }

            },
            //设置默认地址
            setDefault(addrId) {
                axios.get(baseUrl +
                        '/common/address/setDefault?cusId=' + this.userInfo.cusId + "&addrId=" + addrId)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.$message({
                                message: '设置成功',
                                type: 'success'
                            });
                            this.getAddressList()

                        } else {
                            this.$message({
                                message: '设置失败',
                                type: 'error'
                            });

                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //删除地址
            setdel(addrId) {
                axios.get(baseUrl +
                        '/common/address/del?addrId=' + addrId)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getAddressList()

                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //
            addrListChange(value) {
                this.addrForm.area = value[0] + "-" + value[1] + "-" + value[2] + "-" + value[3]
            },



        },

    })
</script>





</html>